{% extends "admin/base_site.html" %}
{% load i18n %}
{% load simpletags %}
{% load static %}
{% block content %}
    <el-row>
        <el-col :span="4">
            <div class="sidebar">
                {% if data %}
                    {% for item in data %}
                        <div class="">
                            <ul id="menu-content" class="menu-content collapse out">
                                <li class="unselected selected sub-menu-title">
                                    {{ item.tag.description }}
                                </li>
                                {% for path in item.paths %}
                                    <li class="unselected selected">
                                        <a class="select-item" href="#">{{ path.summary }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </el-col>
        <el-col :span="20">
            ceshi
        </el-col>
    </el-row>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

    <script>
        $(function () {
            $("li").click(function () {
                $(this).addClass("selected").siblings().removeClass("selected");
            });
        });
    </script>

    <style type="text/css">
        /*deep*/
        .select-item:link {
            color: red;
        }

        .select-item:visited {
            color: black;
        }

        .select-item:hover {
            color: pink;
        }

        .select-item:active {
            color: #ccc;
        }

        ul {
            text-align: center;
        }

        li {
            line-height: 40px;
            width: 150px;
            background-color: #04ead2;
            list-style: none;
        }
        .sub-menu-title {
            background-color: #3c6763;

        }
        .selected {
        {#color: #186ecc;#}{#background-color: #fff;#}
            list-style: none;
        }
        .unselected {
            list-style: none;

        }


    </style>
{% endblock %}